<template>
	<view>
		<view class="top flexrbe ">
			<view class="label flexrst ">
				<image src="../../static/logo.png" class="touxiang"></image>
				<view class="text-box ">
					<view class="top-text fs30 flexrst" >
						张三
						<view class=" ntext" >{{Realm[upgradeNum].name}}</view>
					</view>
					<view class="fs30">####</view>
				</view>
			</view>
			<view class="label fs30">
				****
			</view>
			<view class="label texte fs30">
				{{time}} 年
			</view>
			
		</view>
		<view class="p30 ">
			<view class="flexrbe fs28 bc-fdf8e5">
				<view class="flexrst  ">
					<view class="realm-l">
						境界
					</view>
					<view class="realm-r">
						{{Realm[upgradeNum].name}}
					</view>  
				</view>
				<view class="flexrst ">{{upgradeValue}}/{{Realm[upgradeNum].value}}
					<view class="btn-upgrade " @click="upgrade()">升级</view>
				</view> 
			</view>
		</view>
		<view class="midbox">
			
			<view>
				<image class="img" src="../../static/Bg.png" ></image>
			</view>
			<view class="experience">
				<view class="float-val fs32" style="color: #50d029;">{{'+'+randomUpgradeValue}}</view>
			</view>
			<view class="experience2">
				<view class="flexce">
					<progressbar></progressbar>
					<view class=" fs32" style="color: #50d029;">{{randomMin+'~' + randomMax + '/秒'}}</view>
				</view>
				
			</view>
		</view>
		<view class="btnbox">
			<view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	// import { Time_filter } from'../../utils/index'
	import { progressbar } from'../../components/progress-bar.vue'
	let Dates = new Date()
	export default {
		components:{
			progressbar
		},
		data() {
			return {
				setTime:0,
				time:1,
				upgradeNum:0, // 等级下标
				upgradeValue:1, // 累计经验值
				randomUpgradeValue:0, // 飘起随机经验值
				randomMax:10, // 经验值的上限
				randomMin:1, // 经验值的下限
				timer:null,
				timer2:null,
				Realm:[
					{
						name:'锻体',
						value:'0'
					},
					{
						name:'练气',
						value:'2000'
					},
					{
						name:'筑基',
						value:'16000'
					},
					{
						name:'开光',
						value:'54000'
					},
					{
						name:'融合',
						value:'128000'
					},
					{
						name:'灵寂',
						value:'250000'
					},
					{
						name:'金丹',
						value:'432000'
					},
					{
						name:'元婴',
						value:'686000'
					},
					{
						name:'出窍',
						value:'1024000'
					},
					{
						name:'分神',
						value:'1458000'
					},
					{
						name:'合体',
						value:'2000000'
					},
					{
						name:'渡劫',
						value:'2662000'
					},
					{
						name:'大乘',
						value:'3456000'
					},
					{
						name:'地仙',
						value:'4394000'
					},
					{
						name:'天仙',
						value:'5488000'
					},
					{
						name:'金仙',
						value:'6750000'
					},
					{
						name:'玄仙',
						value:'8192000'
					},
					{
						name:'大罗金仙',
						value:'9826000'
					},
					{
						name:'罗天上仙',
						value:'11664000'
					},
					{
						name:'仙君',
						value:'13718000'
					},
					{
						name:'仙帝',
						value:'16000000'
					},
					{
						name:'准圣',
						value:'18522000'
					},
					{
						name:'大圣',
						value:'21296000'
					},
					{
						name:'圣宗',
						value:'24334000'
					},
					{
						name:'圣王',
						value:'27648000'
					},
					{
						name:'圣皇',
						value:'31250000'
					},
					{
						name:'圣尊',
						value:'35152000'
					},
					{
						name:'至尊',
						value:'39366000'
					}
				],
			};
		},
		onLoad() {
			this.getToDay()
			this.timer2 = setInterval(()=>{
				this.randomUpgradeValue = Math.round(Math.random()*(this.randomMax-this.randomMin)+this.randomMin);
				this.upgradeValue += this.randomUpgradeValue
			},1000)
			this.timer= setInterval(()=>{
				this.time++
			},900000)
			//y=ax^3+b
			
			let y=0
			let a = 2
			let b = this.randomUpgradeValue
			let x = [1,2,3,4,5]
			
			for(let i=0;i<=270;i++)
			{
				this.randomUpgradeValue = Math.round(Math.random()*(this.randomMax-this.randomMin)+this.randomMin);
				console.log('i=',i , 'y=ax^3+b===== ',a*(i*i*i)+this.randomUpgradeValue ,'-----',this.randomUpgradeValue)
				
			}
		},
		methods:{
			getToDay(){
				// Time_filter(Dates,'{y}-{m}-{d} {h}:{i}:{s} {a}')
				console.log('Date===',Dates.getMinutes())
			},
			add(){
				
			},
			upgrade(){
				if(this.upgradeValue < this.Realm[this.upgradeNum].value)
				{
					uni.showToast({
						title:'经验值不足',
						icon:'none',
						mask: true,
						
					})
				}else{
					this.upgradeValue = this.upgradeValue - this.Realm[this.upgradeNum].value
					this.randomMax = (this.randomMax + 10)
					this.randomMin = (this.randomMin + 5)
					this.upgradeNum++
				}
			}
		},
		onHide() {
			// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
			// uni.$once('beforeDestroy', () => {                     
			//         clearInterval(this.timer);                                     
			// })
			//离开页面前清除计时器
			// console.log('onHide');
			clearInterval(this.timer);
			clearInterval(this.timer2);
			uni.setStorageSync('userinfo','')
			this.timer = null;
			this.timer2 = null;
		},
		
	}
</script>

<style scoped>
.top{
	position: relative;
	padding: 100rpx 0 30rpx 0;
	width: 100%;
	background-color: #54d0ff;
	top: 0;
	left: 0;
}
.label{
	/* width:33%; */
}
.touxiang{
	height: 120rpx;
	width: 120rpx;
	border-radius: 120rpx;
	margin:  0 0 0 30rpx;
}
.top-text{
	
}
.text-box{
	margin: 0 0 0 30rpx;
}
.texts{
	text-align: start;
}
.texte{
	text-align: end;
	margin:0 30rpx 0 0;
}
.ntext{
	margin: 0 0 0 10rpx;
}
.p30{
	padding: 30rpx;
	background-color: #fae1a7;
}
.btn-upgrade{
	margin: 10rpx 30rpx;
	background-color: #50d029;
	color: #fafafa;
	padding: 5rpx 30rpx;
	border-radius: 8rpx;
}
.bc-fdf8e5{
	background-color: #fdf8e5;
	border-radius: 8rpx;
	clip-path: polygon();
}
.realm-l{
	margin: 0 30rpx 0 20rpx;
}
.realm-r{
	
}

.midbox{
	
	
}
.btnbox{
	background-color: aqua;
	padding: 190rpx;
}
.img{
    width: 100%;
    height: 700rpx;
}
.experience{
	position: absolute;
    top: 600rpx;
    left: 250rpx;
	height: 50rpx;
	
}
.experience>view{
		transform: scale(1.5);
	}
.experience2{
	position: absolute;
    top: 850rpx;
    left: 39%;
}
.experience2>view{
		/* transform: scale(0.5); */
	}
.float-val{
		font-size: 28rpx;
		animation: move1 1s cubic-bezier(0, 0.74, 0.01, 1.01) infinite;
	}
@keyframes move1 {
		0% {
			font-size: 28rpx;
			transform: translateY(20px);
		}

		100% {
			font-size: 40rpx;
			transform: translateY(-50px);
		}
	}



</style>
